<template>
	<view class="content-item">
		<view class="head flex align-center" @tap="clickBtn(3)">
			<image class="avatar" :src="$mConfig.imageUrl + '/logo.png'" mode="aspectFit"></image>
			<view class="userinfo">
				<view class="userinfo-name">
					张潇潇
				</view>
				<view class="userinfo-bot flex">
					<view class="time">
						入职时间 2024年3月12号
					</view>
					<view class="btn1 flex align-center justify-center" @tap.stop="clickBtn(1)">
						考勤表
					</view>
					<view class="btn2 flex align-center justify-center" @tap.stop="clickBtn(2)">
						退回
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {

		},
		methods: {
			clickBtn(type) {
				this.$emit('clickBtn', type);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-item {
		background-color: #fff;

		.head {
			height: 160rpx;
			border-bottom: 1rpx solid #eee;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.userinfo {
				margin-left: 24rpx;

				.userinfo-name {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.userinfo-bot {
					margin-top: 18rpx;

					.time {
						font-weight: 500;
						font-size: 26rpx;
						color: #222222;
					}

					.btn1 {
						width: 134rpx;
						height: 52rpx;
						background: #3A92FF;
						border-radius: 10rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 33rpx;
					}

					.btn2 {
						margin-left: 14rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						width: 90rpx;
						height: 52rpx;
						background: #ACACAC;
						border-radius: 10rpx;
					}

				}
			}
		}


	}
</style>